<template>
  <div class="app-container  bg-gray">
    <el-card class="box-1">
      <div class="header">
        <div>
          <!--不包含离职人员-->
          <el-select v-if="queryMatch(236)" v-model="searchTerms.user_id" placeholder="工作人员" class="select" clearable filterable @change="getData">
            <el-option v-for="item in usersList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </div>
        <div>
          <el-button type="primary" @click="showDialog">添加物品</el-button>
        </div>
      </div>
      <el-table v-loading="tableLoading" :data="tableData" :max-height="tableMaxHeight" border highlight-current-row @sort-change="handleSortChange">
        <el-table-column prop="name" label="物品清单" min-width="120" header-align="center" align="center"/>
        <el-table-column prop="picture" label="图片" min-width="200" header-align="center" align="center">
          <template slot-scope="scope">
            <el-image :src="scope.row.picture" :preview-src-list="[scope.row.picture]" style="width: 80px;height: 80px;"/>
          </template>
        </el-table-column>
        <el-table-column prop="num" label="数量" min-width="120" header-align="center" align="center"/>
        <el-table-column label="操作" width="140" header-align="center" align="center">
          <template slot-scope="scope">
            <el-button type="danger" size="small" @click="doOfficeArticles(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog :visible.sync="dialogVisible" :modal="false" title="教育/培训经历" width="520px" class="dialog" center @close="trainingForm={}">
      <el-form ref="dialogData" :model="dialogData" label-width="120px">
        <el-form-item label="物品名">
          <el-input v-model="dialogData.name" />
        </el-form-item>
        <el-form-item label="图片">
          <ws-upload-single-img v-model="dialogData.picture" :path="dialogData.picture"/>
        </el-form-item>
        <el-form-item label="数量">
          <el-input-number v-model="dialogData.num" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOfficeArticles">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { handleSortChange, parseTime } from '../../../utils/table'
  export default {
    data() {
      return {
        searchTerms: {
          user_id: ''
        },

        usersList: [],

        // 表格相关数据
        tableMaxHeight: document.documentElement.clientHeight - 320,
        tableLoading: false,
        tableData: [],

        dialogVisible: false,
        dialogData: {}
      }
    },
    created() {
      this.getData();
      this.getUsersList();
    },
    methods: { handleSortChange, parseTime,
      /**
       *  获取系统用户列表
       *  接口:'user/all-list'
       */
      getUsersList() {
        const url = 'user/all-list'
        this.$store.dispatch('GetConnect', { url }).then(res => {
          this.usersList = res.data
        }).catch(e => {
          this.$message.error(e.msg + ',请刷新或联系管理员')
        })
      },
      getData(order) {
        this.tableLoading = true
        order || (order = {})
        const url = 'office/getDataList'
        const data = {
          id: this.searchTerms.user_id
        }
        this.$store.dispatch('GetConnect', { url, data }).then(res => {
          this.tableData = res.data;
          this.tableLoading = false;
        }).catch(e => {
          this.tableLoading = false
          this.$message.error(e.msg + ',请刷新或联系管理员')
        })
      },
      showDialog() {
        this.dialogVisible = true;
        this.dialogData = {};
      },
      addOfficeArticles() {
        const url = 'office/add'
        const data = this.dialogData;
        this.searchTerms.user_id && (data.user_id = this.searchTerms.user_id);
        this.$store.dispatch('GetConnect', { url, data }).then(res => {
          this.$message.success(res.msg)
          this.getData()
          this.dialogVisible = false;
        }).catch(e => {
          this.$message.error(e.msg + ',请刷新或联系管理员!')
        })
      },
      doOfficeArticles(row) {
        this.$confirm('此操作将删除该物品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const url = 'office/del/' + row.id
          this.$store.dispatch('GetConnect', { url }).then(res => {
            this.$message.success(res.msg)
            this.getData()
          }).catch(e => {
            this.$message.error(e.msg + ',请刷新或联系管理员!')
          })
        })
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
@import '../../../styles/index.scss';
.box-1 {
  max-width: 1000px;
  margin: 0 auto;
  .header {
    @include flex-row(center, space-between);
    padding: 10px 0;

    div {
      @include flex-row(center, flex-start);
      flex-wrap: wrap;
    }

    .el-select {
      padding: 0 8px;
      width: 180px;
    }

    .search-input {
      width: 240px;
    }

    .do-btn {
      @extend .bg-green;
      margin-left: 6px;
    }
  }
}
</style>
